<!--
 * @Author: zhangwei 1405298045@qq.com
 * @Date: 2022-03-03 10:21:17
 * @LastEditTime: 2022-04-24 19:01:30
 * @LastEditors: zhangwei 1405298045@qq.com
 * @Description: 
 * @FilePath: /ll-fe-mp-dyfx/src/components/distributionMaterialFeatured/index.vue
 *  
-->
<template>
	<view class="MaterialFeatured" v-if="isListLength">
		<view class="MaterialFeatured-main" :style="{ backgroundImage: 'url(' + featuredBgImage + ')' }">
			<view class="MaterialFeatured-main-title">
				<image :src="featuredTitleImage" />
				<text @click.stop="playCurrentVideo('', false)">
					<template v-if="!isFlag">{{ currentShowIndex }}/</template>
					{{ total }}
				</text>
			</view>

			<view class="MaterialFeatured-main-content">
				<template v-if="!isFlag">
					<swiper
						class="swiper"
						:interval="2000"
						:circular="circular"
						:autoplay="autoPlay"
						:current="currentIndex"
						:disable-touch="disableTouch"
						@change="changeCurrentIndex"
					>
						<swiper-item :key="index" v-for="(item, index) in formatPageSize">
							<template v-if="swiperList[index] !== undefined">
								<view class="MaterialFeatured-main-content-item">
									<view class="MaterialFeatured-main-content-item-mark" @click.stop.prevent="playCurrentVideo(index)">
										<view class="MaterialFeatured-main-content-item-mark-logo">美食探店</view>

										<image lazy-load class="image" :src="formatFeatured[swiperList[index]].coverUrl" />

										<image :src="stopIcon" />
									</view>

									<view class="MaterialFeatured-main-content-item-info">
										<view class="MaterialFeatured-main-content-item-info-left">
											<image :src="formatFeatured[swiperList[index]].headImgUrl" />
										</view>

										<view class="MaterialFeatured-main-content-item-info-conter">
											<input type="text" disabled :value="formatFeatured[swiperList[index]].nickname" />

											<text>{{ formatFeatured[swiperList[index]].channelFens }} 粉丝</text>
										</view>

										<view class="MaterialFeatured-main-content-item-info-right">
											<image src="@/static/icon/icon_sc_money.png" />
											<text class="income">收益</text>

											<text class="mask">￥</text>
											<text class="money">{{ formatFeatured[swiperList[index]].formatMoney }}</text>
										</view>
									</view>
								</view>
							</template>
						</swiper-item>
					</swiper>
				</template>

				<template v-else>
					<view class="MaterialFeatured-main-content-item" v-for="(featuredItem, index) in formatFeatured" :key="index">
						<view class="MaterialFeatured-main-content-item-mark" @click.stop.prevent="playCurrentVideo(index)">
							<view class="MaterialFeatured-main-content-item-mark-logo">美食探店</view>

							<image :src="featuredItem.coverUrl" lazy-load class="image" />

							<image :src="stopIcon" />
						</view>

						<view class="MaterialFeatured-main-content-item-info">
							<view class="MaterialFeatured-main-content-item-info-left">
								<image :src="featuredItem.headImgUrl" />
							</view>

							<view class="MaterialFeatured-main-content-item-info-conter">
								<input type="text" disabled :value="featuredItem.nickname" />

								<text>{{ featuredItem.channelFens }} 粉丝</text>
							</view>

							<view class="MaterialFeatured-main-content-item-info-right">
								<image src="@/static/icon/icon_sc_money.png" />
								<text class="income">收益</text>

								<text class="mask">￥</text>
								<text class="money">{{ featuredItem.formatMoney }}</text>
							</view>
						</view>

						<template v-if="!isRankMark">
							<view
								class="MaterialFeatured-main-content-item-rank"
								:style="{ backgroundImage: 'url(' + featuredItem.rankUrl + ')' }"
							>
								<template v-if="featuredItem.rankLable">
									<text>{{ featuredItem.rankLable }}</text>
								</template>
							</view>
						</template>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';

const featuredBgImage = Object.freeze(`${defaultImageUrl}image/img_bg_sc_zpjx.png`);
const featuredTitleImage = Object.freeze(`${defaultImageUrl}icon/img_sc_zpjx_title.png`);

const stopIcon = `${defaultImageUrl}icon/icon_sc_play.png`;
const publicIcon = `${defaultImageUrl}icon/icon_sc_zpjx_others.png`; // 通用标识

const rankIconList = [
	`${defaultImageUrl}icon/icon_sc_zpjx_first.png`,
	`${defaultImageUrl}icon/icon_sc_zpjx_second.png`,
	`${defaultImageUrl}icon/icon_sc_zpjx_third.png`
];

export default {
	name: 'DistributionMaterialFeatured',

	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},

		isFlag: {
			type: Boolean,
			default: false
		},

		circular: {
			type: Boolean,
			default: false
		},

		total: {
			type: Number
		},

		autoPlay: {
			type: Boolean,
			default: true
		}
	},

	data() {
		this.pageSize = 6;

		return {
			stopIcon,
			featuredBgImage,
			featuredTitleImage,

			currentIndex: 0,
			swiperList: [],

			disableTouch: false,

			currentShowIndex: 1
		};
	},

	watch: {
		list: {
			handler() {
				const { list, swiperList, currentIndex, pageSize, formatFeatured } = this;

				if (!list.length) {
					this.currentShowIndex = 1;
				}

				if (swiperList.length) {
					return;
				}

				const endList = formatFeatured.slice(-currentIndex).map((item) => item.index);
				const startList = formatFeatured.slice(0, pageSize - currentIndex).map((item) => item.index);

				this.swiperList = [...(currentIndex ? endList : []), ...startList];
			}
		}
	},

	computed: {
		isListLength() {
			const { list } = this;

			return list?.length || 0;
		},

		isRankMark() {
			const { isListLength } = this;

			return isListLength <= 1;
		},

		formatFeatured() {
			const { list, isFlag, isRankMark } = this;

			if (isRankMark) {
				return list;
			}

			const formatList = (isFlag ? list.slice(0, 5) : list).map((item, index) => {
				const rankUrl = rankIconList[index];

				return Object.assign(
					{
						...item,

						rankUrl: rankIconList[index] || publicIcon
					},

					!rankUrl && {
						rankLable: ++index
					}
				);
			});

			return formatList;
		},

		formatPageSize() {
			const { isListLength, pageSize } = this;

			return Array.from({ length: Math.min(pageSize, isListLength) }).map((item, index) => index);
		}
	},

	methods: {
		changeCurrentIndex(params) {
			const { current } = params?.detail;
			const { lastIndex = this.currentIndex, pageSize, swiperList, currentIndex, formatFeatured } = this;

			let realIndex = 0;
			let singleValue = null;

			let isLeft = current - lastIndex === 1 || (lastIndex + 1 === pageSize && !current);

			if (isLeft) {
				realIndex = current + (currentIndex || 2);

				let singleIndex = swiperList[current] + (currentIndex || 2);

				if (singleIndex >= formatFeatured.length) {
					singleIndex = singleIndex - formatFeatured.length;
				}

				singleValue = formatFeatured[singleIndex]?.index;

				if (realIndex >= pageSize) {
					realIndex = realIndex - pageSize;
				}
			} else {
				realIndex = current - (currentIndex || 2);

				let singleIndex = swiperList[current] - (currentIndex || 2);

				if (singleIndex < 0) {
					singleIndex = formatFeatured.length + singleIndex;
				}

				singleValue = formatFeatured[singleIndex]?.index;
			}

			this.lastIndex = current;
			swiperList.splice(realIndex, 1, singleValue);

			const showIndex = formatFeatured[swiperList[current]].index + 1;
			this.currentShowIndex = showIndex;

			this.$emit('callBack', showIndex);
		},

		playCurrentVideo(currentIndex, status = true) {
			const { swiperList, formatFeatured } = this;

			const swiperCurrentIndex = status ? swiperList[currentIndex] : 0;

			const { index, clineUserId } = formatFeatured[swiperCurrentIndex];

			const url = `/materialPage/MaterialFeatured?index=${index}&workId=${clineUserId}`;

			uni.navigateTo({
				url,
				success: () => {
					this.$emit('playCallBack', false);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.MaterialFeatured {
	padding: 0 20rpx;
	margin: 28rpx 0 20rpx 0;

	&-main {
		border-radius: 24rpx;
		background: #fff;
		background-size: 100% 472rpx;
		background-repeat: no-repeat;

		&-title {
			height: 108rpx;
			padding-left: 26rpx;

			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 188rpx;
				height: 76rpx;
			}

			text {
				color: #666;
				font-size: 24rpx;
				padding-right: 84rpx;

				width: 48rpx;
				height: 48rpx;

				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		&-content {
			> .MaterialFeatured-main-content-item {
				padding-bottom: 44rpx;

				&:last-child {
					padding-bottom: 23rpx;
				}
			}

			&-item {
				position: relative;
				padding: 0 16rpx;

				&-mark {
					height: 248rpx;
					position: relative;

					border-radius: 16rpx;

					&-logo {
						position: absolute;
						left: -4rpx;
						top: -4rpx;
						z-index: 99;
						width: 120rpx;
						height: 48rpx;
						background: url('@/static/icon/icon_sc_tag.png') no-repeat;
						background-size: cover;

						display: flex;
						align-items: center;
						justify-content: center;

						color: #e5ba66;
						font-size: 22rpx;
						font-weight: 500;
					}

					.image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}

					image {
						position: absolute;
						top: 50%;
						left: 50%;
						width: 80rpx;
						height: 80rpx;
						transform: translate(-50%, -50%);
					}
				}

				&-info {
					margin-top: 20rpx;
					padding: 0 8rpx;

					height: 72rpx;
					display: flex;
					align-items: center;

					&-left {
						image {
							width: 72rpx;
							height: 72rpx;
							border-radius: 50%;
							border: 2px solid #fff;
						}
					}

					&-conter {
						flex: 1;
						padding: 6rpx 0 0 16rpx;

						display: flex;
						flex-direction: column;

						input {
							color: #333;
							font-size: 28rpx;
							font-weight: 500;
							overflow: hidden;

							height: 28rpx;
							min-height: 28rpx;
							line-height: 28rpx;

							border: none;
							background: transparent;
						}

						text {
							color: #999;
							font-size: 20rpx;
							margin-top: 8rpx;
						}
					}

					&-right {
						font-size: 20rpx;

						image {
							width: 32rpx;
							height: 32rpx;
						}

						.income {
							color: #967349;
							margin-right: 4rpx;
						}

						.mask {
							color: #f55f4e;
							font-weight: 500;
						}

						.money {
							color: #f55f4e;
							font-size: 36rpx;
							font-weight: bold;
							font-family: font-number;
						}
					}
				}

				&-rank {
					position: absolute;
					top: 8rpx;
					right: 24rpx;

					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;

					color: #d78236;
					font-size: 28rpx;
					font-weight: 600;

					display: flex;
					align-items: center;
					justify-content: center;

					background-size: cover;
					background-repeat: no-repeat;
				}
			}

			.swiper {
				height: 364rpx;

				&-item {
					padding: 0 16rpx;
					box-sizing: border-box;
				}
			}
		}
	}
}
</style>
